
<template>
  <div class="collapse-item">
    <div class="header" @click="handleclick(title)">
      <h1>{{ title }}</h1>
    </div>
    <div class="wrap" v-for="item in paraArr" v-show="isShow">
      {{ item }}
    </div>

  </div>
</template>

<script>
export default {
  name: "collaspeitem",
  data(){
    return {
      content:[{name:"1",title:"电器",para:["冰箱","彩电","空调","洗衣机"]},
        {name:"2",title: "食品",para: ["薯片","果冻","糖果"]},
        {name:"3",title: "生活用品",para: ["牙膏","牙刷","被子","杯子"]},
        {name:"4",title: "手机",para: ["苹果","华为","小米","oppo"]}

      ],
      paraArr:[],
    }

  },
  props: {
    title:{
      type: [String]
    },
    name:{
      type:[String,Number]
    },
  },
  methods: {
    handleclick(tit){//从div里传值进来title
      var self=this
      for(let item of self.content){
        if(item.title==tit) {
          this.paraArr = item.para;
        }
      }
      this.collapse.$emit('item-click',this);
    },
  },
  inject:['collapse'],//注入collapse,防止弄错item的父元素
  computed:{
    isShow(){
      return this.collapse.value.indexOf(this.name)>-1//该name值是否存在在ActiveName中,不存在即为-1
    }
  }
}

</script>

<style scoped>
.header {
  background-color: #bab3b3;
  font-size: 18px;
  font-weight: 500;
}
.wrap {
  background-color: #afacac;
  font-size: 20px;

}
</style>
